<template>
  <view class="mingli-box" v-if="loading">
    <view class="top-section">
      <view class="section-title">个人信息</view>
      <view class="info-box">
        <view class="info-box-item">
          <view class="info-title">姓名：</view>
          <view class="info-content">{{name}}</view>
        </view>
        <view class="info-box-item">
          <view class="info-title">性别：</view>
          <view class="info-content">{{sex}}</view>
        </view>
        <view class="info-box-item">
          <view class="info-title">阳历生时：</view>
          <view class="info-content">{{yangli}}</view>
        </view>
        <view class="info-box-item">
          <view class="info-title">阴历生时：</view>
          <view class="info-content">{{yinli}}</view>
        </view>
      </view>
    </view>
    <activity-box :positionId="1002"></activity-box>
    <view class="top-section">
      <view class="section-title">排盘结果</view>
      <view class="result-box">
        <view class="ganzhi-containter">
          <view class="ganzhi_item" style="background-color: #F0F0F0">
            <view class="ganzhi_title" v-for="(item, index) in shizhu" :key="index">{{ item }}</view>
          </view>
          <view class="ganzhi_item">
            <view class="ganzhi_title">先天数</view>
            <text class="ganzhi_content" v-for="(item, index) in xianTianshu" :key="index">
              <template v-for="(e, i) in item">
                <span v-if="i!=0">-</span>
                <span :key="i">{{ e }}</span>
              </template>
            </text>
          </view>
          <view class="ganzhi_item">
            <view class="ganzhi_title">阴阳</view>
            <view class="ganzhi_content" v-for="(item, index) in xianYinyang" :key="index">
              <template v-for="(e, i) in item">
                <span v-if="i!=0">-</span>
                <span :key="i">{{ e }}</span>
              </template>
            </view>
          </view>
          <view class="ganzhi_item">
            <view class="ganzhi_title">五行</view>
            <view class="ganzhi_content" v-for="(item, index) in xianTianshu" :key="index">
              <template v-for="(e, i) in item">
                <span v-if="i!=0">-</span>
                <span :style="fiveElementInfo(e).color" class="wuxing-item" :key="i">{{
                    fiveElementInfo(e).name
                  }}</span>
              </template>
            </view>
          </view>
        </view>
        <view class="ganzhi-containter">
          <view class="ganzhi_item" style="background-color: #F0F0F0">
            <view class="ganzhi_title" v-for="(item, index) in shizhu" :key="index">{{ item }}</view>
          </view>
          <view class="ganzhi_item">
            <view class="ganzhi_title">后天数</view>
            <text class="ganzhi_content" v-for="(item, index) in houTianshu" :key="index">
              <template v-for="(e, i) in item">
                <span v-if="i!=0">-</span>
                <span :key="i">{{ e }}</span>
              </template>
            </text>
          </view>
          <view class="ganzhi_item">
            <view class="ganzhi_title">阴阳</view>
            <view class="ganzhi_content" v-for="(item, index) in houYinyang" :key="index">
              <template v-for="(e, i) in item">
                <span v-if="i!=0">-</span>
                <span :key="i">{{ e }}</span>
              </template>
            </view>
          </view>
          <view class="ganzhi_item">
            <view class="ganzhi_title">五行</view>
            <view class="ganzhi_content" v-for="(item, index) in houTianshu" :key="index">
              <template v-for="(e, i) in item">
                <span v-if="i!=0">-</span>
                <span :style="fiveElementInfo(e).color" class="wuxing-item" :key="i">{{
                    fiveElementInfo(e).name
                  }}</span>
              </template>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="top-section">
      <view class="section-title">特殊数组解读</view>
      <template v-if="shuDesList.length != 0">
        <view class="detail-box" v-for="(item, index) in shuDesList">
          <view class="info-box-item">
            <view class="info-title">数字组合：</view>
            <view class="info-content">{{ item.numericalArray }}</view>
          </view>
          <view class="info-box-item">
            <view class="info-title">特殊数组：</view>
            <view class="info-content">{{ item.occurrencePositions }}</view>
          </view>
          <view class="info-box-item">
            <view class="info-title">出现位置：</view>
            <view class="info-content">{{ item.specialArray }}</view>
          </view>
          <view class="info-box-item">
            <view class="info-title">结果解读：</view>
            <view class="info-content">
              {{ item.resultDescription }}
            </view>
          </view>
        </view>        
      </template>
      <view v-else>无内容解读</view>
    </view>
    <activity-box :positionId="1003"></activity-box>
  </view>
</template>
<script>
  import {
    getMingliResultApi
  } from '@/http/api/minglishenshu/api.js'
  export default {
    data() {
      return {
        loading: false,
        shizhu: ["时间", "年", "月", "日", "时"],
        name: "",
        sex: "",
        yangli: "",
        yinli: "",
        xianTianshu: [],
        xianYinyang: [],
        xianWuxing: [],
        houTianshu: [],
        houYinyang: [],
        houWuxing: [],
        shuDesList: [],
        // 数字五行
        numberWuxing: {
          1: {
            name: '水',
            color: "#11FFFF"
          },
          2: {
            name: '水',
            color: "#0DB0EF"
          },
          3: {
            name: '土',
            color: "#FFFFFF"
          },
          4: {
            name: '木',
            color: "#7130A0"
          },
          5: {
            name: '木',
            color: "#03B050"
          },
          6: {
            name: '火',
            color: "#FE3401"
          },
          7: {
            name: '火',
            color: "#C00000"
          },
          8: {
            name: '土',
            color: "#FEFF03"
          },
          9: {
            name: '土',
            color: "#FBA802"
          },
          10: {
            name: '金',
            color: "#595959"
          },
          11: {
            name: '金',
            color: "#0C0C0C"
          },
          12: {
            name: '水',
            color: "#A4744C"
          }
        }
      }
    },
    mounted() {
      uni.showLoading({
        mask: true,
        title: "加载中",
      });
      let query = this.$route.query;
      let {
        name,
        sex,
        year,
        month,
        day,
        hour,
        minute
      } = query;
      getMingliResultApi({
        userName: name,
        birthDay: `${year}-${month}-${day} ${hour}:${minute}`,
        sex: sex == "0" ? "男" : "女"
      }).then(res => {
        if (res.code == 200) {
          this.name = res.data.userName;
          this.sex = res.data.sex;
          this.yangli = res.data.yearGongLi;
          this.yinli = res.data.yearNongLi;
          this.xianTianshu = [[res.data.prev.year], [res.data.prev.month], res.data.prev.day, [res.data.prev.hour]];
          this.xianYinyang = [[res.data.prev.yearYinYang], [res.data.prev.monthYinYang], res.data.prev.dayYinYang, [res.data.prev.hourYinYang]];
          this.xianWuxing = [res.data.prev.yearWuXing, res.data.prev.monthWuXing, res.data.prev.dayWuXing, res.data.prev.hourWuXing];
          this.houTianshu = [[res.data.next.year], [res.data.next.month], res.data.next.day, [res.data.next.hour]];
          this.houYinyang = [[res.data.next.yearYinYang], [res.data.next.monthYinYang], res.data.next.dayYinYang, [res.data.next.hourYinYang]];
          this.houWuxing = [res.data.next.yearWuXing, res.data.next.monthWuXing, res.data.next.dayWuXing, res.data.next.hourWuXing];
          this.shuDesList = res.data.shuDesList;
          uni.hideLoading();
          this.loading = true;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
    methods: {
      // 对应五行信息
      fiveElementInfo(str) {
        let {
          name,
          color,
          backgroundColor
        } = this.numberWuxing[str];
        if (str == 3 || str == 8) {
          backgroundColor = '#000'
        }
        return {
          name: name,
          color: `color: ${color};background-color: ${backgroundColor}`,
        }
      },
    }
  };
</script>

<style lang="scss" scoped>
  .mingli-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 40rpx 0;
    background-color: #fbfafc;
    font-size: 28rpx;
  }

  .top-section {
    width: 85%;
    padding: 20rpx 20rpx 40rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
    background-color: #fff;
    margin: 0 auto 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section-title {
    font-weight: bold;
    font-size: 34rpx;
    padding-bottom: 20rpx;
    color: #c5a57e
  }

  .info-box {
    width: fit-content;
    box-sizing: border-box;
    color: #3d3d3d;
    display: flex;
    flex-direction: column;
  }

  .info-box-item {
    display: flex;
    flex-direction: row;
    flex: 1 0;
    padding: 10rpx 0;
  }

  .info-title {
    white-space: nowrap;
    padding: 0 12rpx;
    font-weight: bold;
    width: 130rpx;
  }

  .info-content {
    margin: 0 24rpx 0 6rpx;
  }

  .result-box {
    width: 100%;
  }

  .ganzhi-containter {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ganzhi_item {
    display: flex;
    flex-direction: row;
    padding: 4rpx 0;
  }

  .ganzhi_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #808080;
    line-height: 50rpx;
    flex: 1 0;
  }

  .ganzhi_content {
    display: flex;
    justify-content: center;
    color: #4b240d;
    flex: 1 0;
    line-height: 50rpx;
  }
  
  .element-icon {
    width: 36rpx;
    height: 36rpx;
  }

  .detail-box {
    width: 100%;
    border: 2rpx solid #ccc;
    border-radius: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
  }
  
  .wuxing-item {
    font-weight: bold;
    border-radius: 6rpx;
    padding: 0 2rpx;
    box-sizing: border-box;
  }
</style>